<template>
  <div class="recommend" ref="recommend">
    <scroll  ref="scroll" class="recommend-content" :data="recommendlist">
    <div>
      <div class="slider-wrapper" v-if="recommends.length" >
        <slide>
          <div v-for="item in recommends" :key="item.img">
            <a :href="item.link">
              <img :src="item.img" :alt="item.title"  @load="loadImage" width="100%">
            </a>
          </div>
        </slide>
      </div>
      <div class="recomendlist">
        <h1 class="listtitle">热门歌单推荐</h1>
        <ul>
          <li class="item" v-for="item in recommendlist" :key="item.dissid" @click="selectItem(item)"> 
            <div class="icon">
              <img v-lazy="item.imgurl" alt="" style="width:60px;height:60px">
            </div>
            <div class="text">
              <h2 class="name">{{item.creator.name}}</h2>
              <p class="desc">{{item.dissname}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="loading-container" v-show="!recommendlist.length">
      <loading></loading>
    </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script>
import {getRecommend,getRecommendList} from "api/recommend"
import {ERR_OK} from "api/config"
import Slide from "base/slide/slide.vue"
import Scroll from "base/scroll/scroll.vue"
import Loading from 'base/loading/loading.vue'
import {playListMixin} from "commom/js/mixin.js"
import {mapMutations} from 'vuex'
export default {
  mixins:[playListMixin],
  data() {
    return{
      recommends:{},
      recommendlist:[]
    }
  },
  created() {
    this._getRecommend()
    this._getRecommendList()
  },
  methods:{
    handlePlayList(playList){
      const bottom  = playList.length > 0 ? '60px' : ''
      this.$refs.recommend.style.bottom = bottom;
      this.$refs.scroll.refresh();
    },
    selectItem(item){
      this.$router.push({
        path:`/recomend/${item.dissid}`
      })   
      this.setDisc(item)
    },
    _getRecommend(){
      getRecommend().then((res)=>{
        if(res.code === ERR_OK){
          this.recommends = res.arr
        }else{
          this.recommends = []
        }    
      })
    },
    _getRecommendList(){
      getRecommendList().then((res)=>{
        if(res.code === ERR_OK){
          this.recommendlist = res.data.list
        }
      })
    },
    loadImage(){
      if (!this.checkloaded) {
          this.checkloaded = true
          setTimeout(() => {
            this.$refs.scroll.refresh()
          }, 500)
          
        }
    },
    ...mapMutations({
      setDisc:'SET_DISC'
    })
  },
  components:{
    Slide,
    Scroll,
    Loading
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~commom/stulys/variable.styl"
.recommend
  position :fixed;
  top: 88px;
  bottom :0;
  width :100%;
  .recommend-content
    height: 100%
    overflow: hidden
  .slider-wrapper
    position: relative
    width: 100%
    overflow: hidden;
  .loading-container
    position: absolute
    width: 100%
    top: 50%
    transform: translateY(-50%)
  .recomendlist
    .listtitle
      height: 65px;
      line-height: 65px;
      text-align :center;
      font-size :$font-size-medium ;
      color :$color-theme;
    .item
      display :flex;
      box-sizing border-box;
      align-items :center;
      padding :0 20px 20px 20px
      .icon
        flex: 0 0 60px;
        width: 60px;
        padding-right: 20px;
      .text 
        display :flex;
        flex-direction :column;
        justify-content :center
        flex: 1;
        line-height: 20px;
        overflow: hidden;
        font-size: $font-size-medium;
        .name
          margin-bottom :10px;
          color :$color-text
        .desc
          color :$color-text-d
</style>
